<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Toggle - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Toggle - Basic</ion-title>
        <ion-buttons slot="primary">
          <ion-toggle></ion-toggle>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content">

      <ion-list>
        <ion-item>
          <ion-label>Apple</ion-label>
          <ion-toggle slot="start" name="apple" checked></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Banana</ion-label>
          <ion-toggle slot="start" name="banana" checked></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Cherry, disabled</ion-label>
          <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Grape, checked, disabled</ion-label>
          <ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
          <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
          <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
          <ion-toggle slot="end" color="danger" checked></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Checkbox right side</ion-label>
          <ion-toggle slot="end" checked></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
          <ion-icon name="information-circle" slot="end"></ion-icon>
        </ion-item>
        
        <ion-item>
          <ion-label>Custom</ion-label>
          <ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle>
        </ion-item>

      </ion-list>


      <p aria-hidden="true"class="ion-text-center">
        <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Grape Checked</ion-button>
        <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Grape Disabled</ion-button>
        <ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
      </p>

      <p>
        <ion-toggle id="standAloneChecked"></ion-toggle>
        Stand-alone toggle:
        <span id="standAloneCheckedSpan"></span>
      </p>
    </ion-content>

    <script>
      function printForm(ev) {

      }

      function toggleBoolean(id, prop) {
        var el = document.getElementById(id);

        var isTrue = el[prop] ? false : true;
        el[prop] = isTrue;
      }
    </script>

  </ion-app>
</body>

</html>
